import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
// nanoid 是一款用于生成唯一的id字符串的东西
import { nanoid } from "nanoid";
// dayjs 是一款用于操作日期时间的模块，另一个比较火的是 momentjs
import dayjs from "dayjs";
// 下面的代码正常是没有问题的，当前项目配置了一些选项，让我们将类型分开引入，使用 TypeScript 3.8 版本提供的 import type 关键字
import { getBannerList, getProductList, getSeckillList } from "@/api/home";

// import type 专门用于引入 类型
import type { IBanner, IProduct } from "@/api/home";

export function useBanner() {
  const bannerList = ref<IBanner[]>([]);

  onMounted(async () => {
    const response = await getBannerList();
    bannerList.value = response.data;
  });

  return {
    bannerList,
  };
}

export function useProduct() {
  const loading = ref(false);
  const page = ref(1); // 当前页码
  const pageSize = ref(10); // 每页显示的条数
  const pageTotal = ref(2); // 总的页数
  const productList = ref<IProduct[]>([]);

  // 是否完结，如果为true，则表示没有下一页
  const isFinished = computed(() => {
    return page.value > pageTotal.value;
  });

  // 请求数据
  const fetchData = async () => {
    try {
      // 判断是否还有下一页
      if (isFinished.value) {
        return;
      }

      // loading 设置为 true， 表示接口调用中
      loading.value = true;
      const response = await getProductList(page.value, pageSize.value);
      // productList.value = response.data;
      // 使用追加的操作
      productList.value.push(...response.data);
    } finally {
      // 不管上面 try 的代码是成功，还是失败，最终都要将 loading 设置回 false
      loading.value = false;
    }
  };

  // 滚动条事件回调
  const handleScroll = () => {
    // console.log("handleScroll");
    // 判断滚动条是否滚动到底部
    const clientHeight = document.body.clientHeight; // 可视区域高度
    const scrollHeight = document.body.scrollHeight; // 文档高度
    const maxScrollTop = scrollHeight - clientHeight - 50; // 最大可以滚动的距离
    const scrollTop = document.documentElement.scrollTop; // 滚动条距离顶部的距离

    // 滚动到底了且当前没有在请求数据
    if (scrollTop >= maxScrollTop && !loading.value) {
      console.log("到底了");
      // 调用接口获取下一页的数据
      page.value++;
      fetchData();
    }
  };

  onMounted(() => {
    fetchData(); // 默认请求一次

    window.addEventListener("scroll", handleScroll);
  });

  onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
  });

  return {
    page,
    pageSize,
    isFinished,
    productList,
  };
}

export function useGridList() {
  const gridList = [
    {
      id: nanoid(),
      text: "京东超市",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "数码电器",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东新百货",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东生鲜",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东到家",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东超市",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "数码电器",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东新百货",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东生鲜",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东到家",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
    },
  ];

  return { gridList };
}

export function useSeckill() {
  const seckillList = ref<IProduct[]>([]);

  // 定义一个 countDownRef 用于承载 count-down 的实例对象
  const countDownRef = ref();

  // 秒杀倒计时，是一个毫秒的数据，这个数据的值，应该也是接口返回的
  const time = ref(1 * 1000); // ms

  // 秒杀功能是否显示
  const isShow = ref(true);

  const fetchData = async () => {
    const response = await getSeckillList();
    seckillList.value = response.data;

    // 后端接口返回的数据可能不会是一个倒计时的毫秒数。而是给你一个倒计时的日期事件 2023-01-13 00:00:00 这时需要我们自己来计算倒计时时间。
    let endDate = "2023-01-13 00:00:00";

    // time.value = dayjs(endDate).diff(dayjs());
    time.value = 10 * 1000;

    // 开始倒计时，应该等到上面 time.value 将页面渲染成功真实DOM成功之后，再开启
    // console.log(countDownRef.value);
    nextTick(() => {
      countDownRef.value.start();
    });
  };

  // 处理倒计时完成
  const handleFinish = () => {
    console.log("处理倒计时完成");
    // 将isShow设置为false
    isShow.value = false;
  };

  onMounted(() => {
    fetchData();
  });

  return {
    countDownRef,
    seckillList,
    time,
    isShow,
    handleFinish,
  };
}
